<template>
    <div class="vo-drag-position-tree">
        <el-tree
            :data="data"
            node-key="id"
            default-expand-all
            draggable
            :props="{
                label: 'name'
            }"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
        >
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-circle-plus-outline"
                    @click="() => append(data)">
                </el-button>
                <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-delete"
                    @click="() => remove(data, node)">
                </el-button>
                </span>
            </span>
        </el-tree>

        <el-dialog :title="title" :visible.sync="visible">
            <VoSchemaForm ref="sf" :model="model" :schema="schema" :rules="rules">
                <template #footer>
                    <div>
                        <el-button type="primary" @click="save">保存</el-button>
                        <el-button @click="visible = false">取消</el-button>
                    </div>
                </template>
            </VoSchemaForm>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'VoDragPositionTree',
    props: {
        data: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            title: '新增',
            visible: false,
            currentItem: null,
            model: {},
            schema: {
                properties: {
                    name: {
                        label: '名称',
                        widget: 'input',
                        ui: {
                            placeholder: '请输入名称'
                        }
                    },
                    width: {
                        label: '宽度',
                        widget: 'inputNumber',
                        ui: {
                            placeholder: '请输入宽度',
                            min: 0
                        }
                    },
                    'props.minResizeWidth': {
                        label: '最小宽度',
                        widget: 'inputNumber',
                        ui: {
                            placeholder: '请输入宽度',
                            min: 0
                        }
                    },
                    'props.maxResizeWidth': {
                        label: '最大宽度',
                        widget: 'inputNumber',
                        ui: {
                            placeholder: '请输入宽度',
                            min: 0
                        }
                    },
                    height: {
                        label: '高度',
                        widget: 'inputNumber',
                        ui: {
                            placeholder: '请输入宽度',
                            min: 0
                        }
                    },
                    'props.minResizeHeight': {
                        label: '最小高度',
                        widget: 'inputNumber',
                        ui: {
                            placeholder: '请输入宽度',
                            min: 0
                        }
                    },
                    'props.maxResizeHeight': {
                        label: '最大高度',
                        widget: 'inputNumber',
                        ui: {
                            placeholder: '请输入宽度',
                            min: 0
                        }
                    }
                }
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        append(item) {
            this.currentItem = item;
            const id = Math.floor(Math.random() * 1000000);
            this.model = {
                id: id,
                name: `动物室${id}`,
                width: 100,
                height: 100,
                x: 0,
                y: 0,
                top: 0,
                left: 0,
                props: {
                    overstep: true,
                    minResizeWidth: 100,
                    minResizeHeight: 100,
                    maxResizeWidth: 400,
                    maxResizeHeight: 400
                }
            }
            this.visible = true
        },
        remove(data, node) {
            this.$emit('node-remove', data)
        },
        save() {
            this.$refs.sf.validate().then((valid) => {
                if (!this.currentItem.children) {
                    this.$set(this.currentItem, 'children', [])
                }
                this.currentItem.children.push({ ...this.model })
                this.visible = false
            }).catch((err) => {
                console.log(err);
            })
        },
        handleNodeClick(e) {
            this.$emit('node-click', e)
        }
    }
}
</script>

<style lang="scss" scoped>
.vo-drag-position-tree{
    min-width: 300px;
}
</style>
